<template>
	<view class="page" :style="{height: wh +'px'}" style="background-color: #fff;" v-if="detail.name">
		<view class="box">
			<uni-card :is-shadow="false">
				<view slot="title" class="header">
					<view class="header-left">
						<view class="header-img">
							<image :src="detail.image"></image>
						</view>
						<view class="header-center">
							<view class="dc-name">
								<text>{{detail.name}}</text>
								{{detail.professionalTitle}}医师
							</view>
							<view class="dc-hospital">
								<text>{{detail.hospital}}</text>{{detail.department}}
							</view>
						</view>
					</view>
					<view class="header-btn">
						<view class="btn">关注</view>
					</view>
				</view>
				<text class="uni-body">擅长: {{detail.specialty}}</text>
			</uni-card>
			<view class="navbar">
				<view :class="{synopsis:true,active:active ===0}" @click="active=0">
					医生简介
				</view>
				<view :class="{videoInfo:true ,active:active ===1}" @click="active=1">
					视频信息
				</view>
			</view>
		</view>
		<view class="detail-box">
			<view :class="{'active-box':active!==0 , 'introduce':true}">
				{{detail.details}}
			</view>
			<uni-card :class="{'active-box':active!==1}" :cover="cover" v-for="item in videoList"
				:key="item.subjectCode">
				<view class="title" slot="cover">
					<video :src="item.videoInfoRspDtos[0].url" :controls="false" :show-fullscreen-btn="false"
						:show-play-btn="false" :show-center-play-btn="false"
						@click="toVideoDetail(item.subjectCode)"></video>
				</view>
				<text class="uni-body uni-title">{{item.topicTitle}}</text>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item share-box" @click="handleClick('分享')">
						<button open-type="share" size="mini">分享</button>
						<uni-icons type="redo" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">分享</text>
					</view>
					<view class="card-actions-item" @click="handleClick('点赞')">
						<uni-icons type="heart" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">点赞</text>
					</view>
					<view class="card-actions-item" @click="handleClick('评论')">
						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">评论</text>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		getDoctorDetailApi,
		getDoctorVideoApi
	} from '../../common/api/doctorApi.js'
	import {
		getBannerDetailApi
	} from '../../common/api/homeApi.js'
	export default {
		data() {
			return {
				id: 0,
				detail: {},
				active: 0,
				wh: 0,
				videoList: [],
				cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				}
			};
		},
		async onLoad(option) {
			if (option.code) {
				//首页轮播图跳转
				const res = await getBannerDetailApi(option.code, option.category)
				this.id = res.data.id
				this.getDoctorDetail()
			} else {
				this.id = option.id
				this.getDoctorDetail()
			}
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
		},
		methods: {
			async getDoctorDetail() {
				const res = await getDoctorDetailApi(this.id)
				this.detail = res.data
				this.getVideoList()
			},
			async getVideoList() {
				const res = await getDoctorVideoApi(this.detail.doctorCode, this.detail.name)
				this.videoList = res.data.records
			},
			toVideoDetail(subjectCode) {
				uni.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?subjectCode=${subjectCode}`
				})
			},
			async handleClick(type) {
				if (type === '分享') {
					const r = await uni.getProvider()
				} else {}
			}
		},
		onShareAppMessage() {
			//0:正式版,1:开发版,2:体验版
			let type = 0
			let envVersion = wx.getAccountInfoSync().miniProgram.envVersion;
			if (envVersion === 'develop') {
				type = 1
			} else if (envVersion === 'trial') {
				type = 2
			}
			console.log('分享')
			return {
				title: '自定义分享标题',
				imageUrl: "../../static/logo.png",
				path: '/page/lecture/lecture'
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.page {
		width: 100%;
		height: 100%;
	}

	.page {
		.box {
			padding: 20rpx 0 0 0;
			background: -webkit-linear-gradient(top, #2ec7c9, #5fd4d5);
			position: relative;
			padding-bottom: 60rpx;
			border-bottom-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
		}
	}

	/deep/ .uni-card {
		background-color: transparent !important;
	}


	.header {
		display: flex;
		justify-content: space-between;
		height: 160rpx;
		align-items: center;
		padding-top: 20rpx;
		border-bottom: 2rpx solid #000;
		background-color: transparent;

		.header-left {
			display: flex;
			justify-content: end;

			.header-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				overflow: hidden;
				margin-right: 35rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.header-center {
			text {
				margin-right: 20rpx;

			}

			font-size: 25rpx;
			color: rgba(0, 0, 0, 0.6);

			.dc-name {
				text {
					font-size: 35rpx;
					color: #000;
				}

			}
		}

		.header-btn {
			.btn {
				width: 120rpx;
				height: 60rpx;
				background-color: #fff;
				text-align: center;
				line-height: 60rpx;
				border-radius: 30rpx;
				border: 2rpx solid #00c8aa;
				color: #00c8aa;
			}
		}
	}

	.navbar {
		position: absolute;
		bottom: -50rpx;
		left: 50%;
		transform: translate(-50%);
		width: 80%;
		height: 100rpx;
		margin: 0 auto;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 10rpx;
		border: 2rpx solid #f6f8fa;
		text-align: center;
		line-height: 100rpx;

		.synopsis {
			flex: 1;
			border-right: 2rpx solid #f5f5f5;
			height: 100%;
		}

		.videoInfo {
			flex: 1;
			height: 100%;
		}
	}

	.active {
		color: #00c8aa;
	}

	.uni-body {
		color: #000;
	}

	.detail-box {
		margin-top: 80rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
	}

	.card-actions {
		display: flex;
		justify-content: space-between;
	}

	.title {
		padding-top: 10rpx;

		video {
			width: 100%;
		}
	}

	.uni-title {
		font-size: 40rpx;
		color: #6f6866;
	}

	.active-box {
		display: none;
	}

	/deep/ .card-actions {
		.card-actions-item {}
	}

	.share-box {
		position: relative;

		button {
			position: absolute;
			opacity: 0;
		}
	}

	.introduce {
		padding: 0 50rpx;
		color: #6f6866;
		font-size: 28rpx;
	}

	/deep/ .uni-card {
		font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;
	}
</style>
